Genie settings
Description
When the 'Genie style' checkbox in the 'Tab/Accordion Control Properties' section is checked, then a number of 'Genie settings' will appear. These settings structure how the genie will appear when the component is run.
The genie provides an alternate customizable method of moving between the tab panes in a tab control. Rather then clicking on an individual tab to open a given tab pane, users can click on 'next' and 'previous' buttons to move between tabs.
- Name
- Description
- 'Cancel' button class
Specify the class for the Cancel button.
- 'Cancel' button onClick event
Specify the Javascript for the Cancel button.
- 'Cancel' button style
Specify the in-line style for the Cancel button.
- 'Next' button class
Specify the class for the next button.
- 'Next' button label
Specify the label for the next button.
- 'Next' button style
Specify the in-line style for the next button.
- 'Previous' button class
Specify the class for the previous button.
- 'Previous' button label
Specify the label for the previous button.
- 'Previous' button style
Specify the in-line style for the previous button.
- 'Submit' button class
Specify the class for the Submit button.
- 'Submit' button label
Specify the label for the Submit button.
- 'Submit' button onClick event
Specify the Javascript for the Submit button. If you leave this blank the {dialog.object}.submit() method will be called.
- 'Submit' button style
Specify the in-line style for the Submit button.
- Button alignment
Specify if the buttons should be shown on the right or left side of the Genie.
- Button bar width
Specify the width of the Genie Buttons bar.
- Genie buttons position
Specify if the Genie buttons should be above or below the tab control.
- 'Cancel' button label
Specify the label for the Cancel button.
- Has 'Next' button
The 'Next' button moves to the next pane in the Genie.
- Has 'Previous' button
The 'Previous' button moves to the previous pane in the Genie.
- Has 'Submit' button
The 'Submit' button moves to the Submit pane in the Genie.
- Hide tab buttons
Specify if the Genie should show tab pane buttons. If you hide the tab pane buttons, then the user will have to use the Next and Previous buttons to navigate from one pane to the next. When the user navigates using the 'Next' button, the fields on the current pane are validated and you can only go the next pane if there are no validation errors.
- Progress bar color
Specify the color of the progress bar.
- Progress bar size and border color
Specify the size of the progress bar. Use CSS syntax to specify the height, width, and border color.
- Progress indicator style
Specify the style for the progress indicator.
- Progress indicator template
Specify the template for the progress indicator.
- Show progress
Specify the Genie should display an indicator telling the user what pane they are on, and how many panes there are in total.